<template>
  <div :class="['component__group_tuan_cart', kl_md.KLGL == 1 ? 'gelin-card' : '']">
    <div class="group-box">
        <div class="group-info">
            <div class="tips-price">拼团价￥{{detail.lastMoney}}</div>
            <div class="course-info-box">
                <div class="course-left">
                    <img :src="detail.course.iconPath" alt="">
                </div>
                <div class="course-right">
                    <div class="course-name">{{detail.course.courseName}}</div>
                    <div class="price-and-teacher">
                        <span class="price">原价：{{detail.course.price}}</span>
                        <span class="teacher">{{detail.course.acName}}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="fixed-group">
            <div class="group-detail-content">需{{detail.personNum}}人成团，{{detail.teamList.length}}人正在拼团，可直接参与</div>
            <div class="group-btn-list">
                <div class="btn-left-icon" @click="toPath(detail.course.id)">
                    <div class="icon-box"></div>
                    <div class="btn">参与拼团</div>
                </div>
                <div class="btn-right-icon" @click="toPath(detail.course.id)">
                    <div class="icon-box"></div>
                    <div class="btn">邀请他人参与拼团</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  props: ["detail"],
  components: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      is_ios(state) {
        return state.is_ios;
      },
      is_in_wechat(state) {
        return state.is_in_wechat;
      },
      member_discount(state) {
        return state.member_discount;
      },
      is_hidden_content(state) {
        return state.is_hidden_content;
      },
      kl_md(state) {
        return state.kl_md;
      },
      is_wechat_ios_limit(state) {
        return state.is_wechat_ios_limit;
      }
    }),
    is_show_price() {
      if (this.is_wechat_ios_limit) {
        return this.is_ios && this.is_in_wechat;
      } else {
        return false;
      }
    }
  },
  watch: {},
  methods: {
    toPath(id) {
      this.$router.push({
        path: "/m/course-detail",
        query: {
          id
        }
      });
    }
  },
  created() {
    console.log(this.detail);
  },
  mounted() {}
};
</script>

<style lang="scss" scoped>
.component__group_tuan_cart {
    width: 7.2rem;
    // height: 6.4128rem;
    margin-bottom: .6144rem;
    .group-box{
        width: 6.624rem;
        height: 6.4128rem;
        margin: 0 auto;
        position: relative;
        .group-info{
            width: 100%;
            height: 4.6848rem;
            height: 4rem;
            background: #FFFFFF;
            border-radius: .192rem .192rem .5rem .5rem;
            position: relative;
            .tips-price{
                position: absolute;
                left: 0;
                top: 0;
                // width: 2.1504rem;
                height: .6816rem;
                background: linear-gradient(44deg, #FFE07B 0%, #FFA85A 100%);
                box-shadow: .0192rem 0 .1344rem 0 rgba(9, 9, 9, 0.5);
                border-radius: 0 0 .96rem 0;
                font-size: .288rem;
                line-height: .6816rem;
                padding: 0 .4rem 0 .2rem;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FF305E;
            }
            .course-info-box{
                padding: .384rem .288rem .384rem .384rem;
                display: flex;
                justify-content: space-between;
                .course-left{
                    width: 3.0144rem;
                    height: 1.728rem;
                    // background: #949494;
                    border-radius: .1344rem;
                    img{
                        display: block;
                        width: 100%;
                        height: 100%;
                        border-radius: .1344rem;
                    }
                }
                .course-right{
                    width: 2.7rem;
                    height: 1.728rem;
                    .course-name {
                        font-size: 0.2688rem;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #333333;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                        line-height: 0.384rem;
                        height: 0.768rem;
                        margin-bottom: 0.6rem;
                    }
                    .price-and-teacher{
                        display: flex;
                        justify-content: space-between;
                        .price{
                            text-decoration: line-through;
                            font-size: .2688rem;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #FF305E;
                        }
                        .teacher{
                            font-size: .2304rem;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #999999;
                        }
                    }
                }
            }
        }
        .fixed-group{
            position: absolute;
            bottom: 0rem;
            left: .24rem;
            width: 6.144rem;
            height: 3.5712rem;
            background: linear-gradient(147deg, #FFDFB3 0%, #FFAE69 100%);
            box-shadow: .0192rem 0 .288rem 0 rgba(35, 36, 37, 0.2);
            border-radius: .192rem;
            padding: .288rem .3648rem;
            .group-detail-content{
                text-align: center;
                font-size: .288rem;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #FFFFFF;
            }
            .group-btn-list{
                display: flex;
                // justify-content: space-around;
                justify-content: space-between;
                .btn-left-icon,.btn-right-icon{
                    .icon-box{
                        width: 1.248rem;
                        height: 1.248rem;
                        background: #FFFFFF;
                        border-radius: 50%;
                        display: block;
                        box-shadow: 0 0 .2592rem 0 rgba(170, 89, 59, 0.1);
                        overflow: hidden;
                        margin: .5rem auto .2304rem;
                        background: url('/img/mobile/group-btn.png');
                        background-repeat: no-repeat;
                        background-size: 2.496rem 1.248rem;
                    }
                    .btn{
                        padding: 0 .3rem;
                        text-align: center;
                        height: .5184rem;
                        line-height: .5184rem;
                        background: linear-gradient(135deg, #FF508F 0%, #FF2B57 100%);
                        border-radius: .2592rem;
                        font-size: .288rem;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 500;
                        color: #FFFFFF;
                    }
                }
                .btn-left-icon{
                    .icon-box{
                        background-position: 0 0;
                    }
                }
                .btn-right-icon{
                    .icon-box{
                        background-position: -1.248rem 0;
                    }
                }
            }
        }
    }
}
</style>
<style lang="scss">
.component__group_tuan_cart {
}
</style>
